<style lang="stylus">
.feed-back
  color black
  background #f3f3f3
  font-family FZLTZHK--GBK1-0
  padding-bottom 138px
  .feed-back-item
    padding-bottom 30px
    .feed-back-name
      color #333
      font-size 28px
      line-height 65px
      padding 10px 20px 0
    .feed-back-content
      &.problem
        padding 0 30px
        display flex
        justify-content space-around
        flex-wrap wrap
        .problem-item
          width 200px
          background #E6E6E6
          color #333333
          text-align center
          line-height 70px
          margin-top 30px
          border-radius 35px
          &.active
            background #5142BE
            color #ffffff
      .description
        width 100%
        height 300px
        line-height 50px
        border none 
        padding 10px 20px
        box-sizing border-box
        font-size 32px
        resize none
      .contact
        width 100%;
        line-height 88px
        border none
        padding 0 20px
        font-size 32px
        border-bottom 1px solid #f3f3f3
.submit
  width 100%
  line-height 98px
  text-align center
  color #fff
  font-size 32px
  background #5142BE
  position fixed
  bottom 0
  max-width 750px;/*no*/
  margin 0 auto
</style>

<template lang="pug">
.feed-back.relative
  title-bar(title="我要求片" v-if="!isApp")
  .feed-back-item
    .feed-back-name 我遇到的问题
    .feed-back-content.problem
      .problem-item(v-for="item in problemList" @click="chooseProblem(item)" :class="currentProblem === item ? 'active' : ''") {{item}}
  .feed-back-item
    .feed-back-name 详细描述（必填）
    .feed-back-content
      textarea.description(placeholder="请描述下您出现此问题的详细场景、时间点，便于我们更好的帮助您解决问题哦！" v-model="description")
  .feed-back-item
    .feed-back-name 请输入联系方式，方便我们联系（必填）
    .feed-back-content
      input.contact(v-model="qq" placeholder="请输入您的QQ或邮箱" type="text")
  .submit(@click="feedSubmit") 确认提交
</template>

<script>
import TitleBar from '../components/TitleBar.vue'

export default {
  name: 'feed-back',
  components: {
    TitleBar
  },
  data () {
    return {
      problemList: undefined,
      currentProblem: undefined,
      description: '',
      qq: '',
      isApp: false
    }
  },

  created () {
    this.isApp = this.config.env.isApp
    this.getProblemList()
  },
  
  methods: {
    // 获取问题列表
    getProblemList () {
      this.$get('userFeedback/type/list').then(res => {
        this.problemList = res
      })
    },

    chooseProblem (item) {
      this.currentProblem = item
    },
    feedSubmit () {
      let url = 'userFeedback/add',
          data = {
            typeName: this.currentProblem,
            description: this.description,
            qq: this.qq,
            userId: this.userId || 100000
          }
      if (!data.typeName) {
        this.$toast('请选择您遇到的问题')
        return
      }
      if (!data.description) {
        this.$toast('请填写详细描述')
        return
      }
      if (!data.qq) {
        this.$toast('请填写联系方式')
        return
      }
      this.$post(url, data).then(res => {
        this.$toast('提交成功')
        setTimeout(() => {
          if (this.isApp) {
            this.action('goback')
          } else {
            window.history.go(-1)
          }
        }, 2000)
      })
    }
  }
}
</script>